import { defineComponent, ref } from "vue";
import { useESign } from "../../../../dist";
import './index.scss';

export default defineComponent({
  emits: ['closeModal'],
  setup(_, { emit }) {
    const src = ref<string>();
    const canvas = ref<HTMLCanvasElement>();
    const sign = useESign(() => canvas.value, { type: 'jpg' });

    const preview = () => {
      src.value = sign.getData();
    }

    const closeHandler = () => {
      emit('closeModal');
    };
    return () => (
      <div>
        <div class="e-sign">
          <canvas style='width:100%' ref={canvas} />
        </div>
        <div class="option">
          <button type="button" onClick={sign.undo}>撤销</button>
          <button type="button" onClick={sign.changePenColor}>颜色</button >
          <button type="button" onClick={sign.clear}> 重置</button >
          <button type="button" onClick={sign.save}> 保存</button >
          <button type="button" onClick={preview}> 预览</button>
        </div>
        <div class="e-sign">
          <img src={src.value} alt="preview" />
        </div>
        <button type="button" onClick={closeHandler}>close</button>
      </div>
    );
  }
});